<html>
<head>
<link rel="stylesheet" href='/static/css/style.css' />
<script src="/static/js/jquery.min.js" type="text/javascript"></script>  
<script>
	function car_go(){
		$.ajax({
			type: 'GET',
			url: '/front',
            dataType: 'json',
			data: {'action':'front'},
	     	success: function(res){
				console.log(res)
			},
			error: function(){
				consle.log('error')
			}
		})	
	}
    function car_stop(){
		$.ajax({
			type: 'GET',
			url: '/stop',
            dataType: 'json',
			data: {'action':'stop'},
	     	success: function(res){
				console.log(res)
			},
			error: function(){
				consle.log('error')
			}
		})	
	}
    function car_turn_left(){
		$.ajax({
			type: 'GET',
			url: '/turn_left',
            dataType: 'json',
			data: {'action':'turn_left'},
	     	success: function(res){
				console.log(res)
			},
			error: function(){
				consle.log('error')
			}
		})	
	}
    function car_turn_right(){
		$.ajax({
			type: 'GET',
			url: '/turn_right',
            dataType: 'json',
			data: {'action':'turn_right'},
	     	success: function(res){
				console.log(res)
			},
			error: function(){
				consle.log('error')
			}
		})	
	}
</script>

</head>
<body>
<h1>Raspberry Pi Car: Motor</h1>
<div id="run_car">
    <button onclick="car_go()">前进</button>
    <button onclick="car_stop()">停止</button>
    <button onclick="car_turn_left()">左转</button>
    <button onclick="car_turn_right()">右转</button>
</div>
</body>
</html>